<template>
    <canvas ref="widthways" :style="getRuleStyle" style="flex: none"></canvas>
</template>

<script>
import store from '@/js/store/state.js';
import user from '@/js/util/user.js';
export default {
    name: 'scaleRule',
    props: {
        options: {
            type: Object,
            default: () => ({
                offsetX: 0,
                offsetY: 0,
                scale: 1
            })
        },
        mode: {
            type: String,
            default: 'horizontal' // horizontal , vertical
        }
    },
    data() {
        return {
            user: user,
            canvas: store.getCanvas(),
        }
    },
    computed: {
        getRuleStyle() {
            return {
                width: this.mode === 'horizontal' ? '100%' : '20px',
                height: this.mode === 'horizontal' ? '20px' : '100%',
                backgroundColor: '#333333',
                zIndex: 996,
                // display: 'block',
                // cursor: mode === 'horizontal' ? 'row-resize' : 'col-resize'
            }
        }
    },
    watch: {
        options: {
            handler: function (val, oldVal) {
                this.$nextTick(() => {
                    this.renderWidthWays();
                })
            },
            deep: true
        },
        canvas: {
            handler: function (val, oldVal) {
                this.$nextTick(() => {
                    this.renderWidthWays();
                })
            },
            deep: true
        }
    },
    mounted() {
        setTimeout(() => {
            this.renderWidthWays();
        }, 200);
    },
    methods: {
        getFixed(sparsity) {
            const pointIdx = String(sparsity).indexOf('.')
            const len = String(sparsity).length
            return pointIdx < 0 ? 0 : len - pointIdx - 1
        },
        isCloseToInteger(num) {
            return Math.abs(num - Math.round(num)) < 0.0000001
        },
        getSparsity(scale) {
            if (scale <= 1) {
                return 100
            } else if (scale <= 3) {
                return 50
            } else if (scale <= 4) {
                return 20
            } else if (scale <= 5) {
                return 10
            }
            return 5
        },
        getPixelRatio: function (context) {
            let backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1;
            return (window.devicePixelRatio || 1) / backingStore;
        },
        renderWidthWays() {
            const canvas = this.$refs.widthways;
            if (!canvas) {
                return
            }
            // canvas.addEventListener('mousedown', function(e){
            //     console.log(e);
            // })
            // canvas.addEventListener('mouseup', function(e){
            //     console.log(e);
            // })
            // canvas.addEventListener('mousemove', function(e){
            //     console.log(e);
            // })
            // canvas.addEventListener('mouseout', function(e){
            //     console.log(e);
            // })
            // const { width, height } = canvas.getBoundingClientRect()
            let width = 1920
            let height = 20
            let editor_box = document.getElementById(window.getRootName() + 'EDITOR').getBoundingClientRect();
            let content_editor_box = document.getElementById(window.getRootName() + 'SECTION_CONTENT_EDITOR').getBoundingClientRect();
            let content_editor_box_width = 0;
            let content_editor_box_height = 0;
            if (user.getPanel() === 'true' && this.$store.state.viewportSize.width > 0) {
                content_editor_box_width = this.$store.state.viewportSize.width - 490;
                content_editor_box_height = this.$store.state.viewportSize.height - 84;
            } else {
                content_editor_box_width = content_editor_box.width;
                content_editor_box_height = content_editor_box.height;
            }
            // console.log('editor', editor_box.width);
            // console.log('content', content_editor_box_width);
            let differenceWidth = content_editor_box_width - editor_box.width;
            let differenceHeight = content_editor_box_height - editor_box.height;
            if (this.mode === 'horizontal') {
                if (differenceWidth >=0) {
                    width = +this.canvas.width + differenceWidth / (this.canvas.scale / 100);
                    height = 20;
                } else {
                    width = +this.canvas.width;
                    height = 20;
                }
            } else {
                if (differenceHeight >= 0) {
                    width = 20;
                    height = +this.canvas.height + differenceHeight / (this.canvas.scale / 100);
                } else {
                    width = 20;
                    height = +this.canvas.height;
                }
            }
            // if (this.mode === 'horizontal') {
            //     width = +this.canvas.width;
            //     height = 20;
            // } else {
            //     width = 20;
            //     height = +this.canvas.height;
            // }
            const ctx = canvas.getContext('2d');
            // const dpi = 2
            const dpi = this.getPixelRatio(ctx)
            canvas.width = width * dpi;
            canvas.height = height * dpi;

            // canvas.style.width = width + 'px'
            // canvas.style.height = height + 'px'
            if (this.mode === 'horizontal') {
                if (differenceWidth >=0) {
                    canvas.style.width = content_editor_box_width + 'px'
                    canvas.style.height = height + 'px'
                } else {
                    canvas.style.width = editor_box.width + 'px'
                    canvas.style.height = height + 'px'
                }
            } else {
                if (differenceHeight >=0) {
                    canvas.style.width = width + 'px'
                    canvas.style.height = content_editor_box_height + 'px'
                } else {
                    canvas.style.width = width + 'px'
                    canvas.style.height = editor_box.height + 'px'
                }
            }
            // if (this.mode === 'horizontal') {
            //     canvas.style.width = editor_box.width + 'px'
            //     canvas.style.height = height + 'px'
            // } else {
            //     canvas.style.width = width + 'px'
            //     canvas.style.height = editor_box.height + 'px'
            // }
            let { width: w, height: h } = canvas
            w /= dpi
            h /= dpi
            ctx.scale(dpi, dpi)
            ctx.clearRect(0, 0, w, h)
            ctx.save()
            ctx.lineWidth = 1
            ctx.strokeStyle = '#656565'
            ctx.fillStyle = '#909090'
            let fontSize = 12;
            // if (this.mode === 'horizontal') {
            //     if (differenceWidth >=0) {
            //         fontSize = fontSize / (1 - (differenceWidth / content_editor_box_width))
            //     } else {
            //         fontSize = 12
            //     }
            // } else {
            //     if (differenceHeight >=0) {
            //         fontSize = fontSize / (1 - (differenceHeight / content_editor_box_height))
            //     } else {
            //         fontSize = 12
            //     }
            // }
            // if (fontSize >= 16) {
            //     fontSize = 16
            // }
            // let fontSize = 12 / (this.canvas.scale / 100)
            ctx.font = `${fontSize}px Microsoft YaHei`
            ctx.beginPath()
            const { offsetX, offsetY, scale } = this.options
            const offset = this.mode === 'horizontal' ? offsetX : offsetY
            // 间隔
            const sparsity = this.getSparsity(scale) // 100
            // 间隔内有多少条线
            const part = 10
            const pixelPerUnit = scale * sparsity // 100
            const gap = pixelPerUnit / part // 10
            const fixed = this.getFixed(sparsity)

            let index = offset % gap > 0 ? gap - (offset % gap) : -offset % gap
            if (this.mode === 'horizontal') {
                // ctx.translate(29.5, 0)
                ctx.translate(0, 0)
                do {
                    const num = ((offset + index) / pixelPerUnit) * sparsity
                    if (this.isCloseToInteger(num / sparsity)) {
                        ctx.moveTo(index, h * 0.5)
                        ctx.lineTo(index, h)
                        const text = num.toFixed(fixed)
                        const textWidth = ctx.measureText(text).width
                        if (num == w) {
                            ctx.fillText(text, index - textWidth, 10)
                        } else if (num === 0) {
                            ctx.fillText(text, index, 10)
                        } else {
                            ctx.fillText(text, index - textWidth / 2, 10)
                        }
                        // ctx.fillText(text, index - textWidth / 2, 10)
                    } else {
                        ctx.moveTo(index, h * 0.7)
                        ctx.lineTo(index, h)
                    }
                    index += gap
                } while (index <= w)
            } else {
                // ctx.translate(0, -0.5)
                ctx.translate(0, 0)
                do {
                    const num = ((offset + index) / pixelPerUnit) * sparsity
                    if (this.isCloseToInteger(num / sparsity)) {
                        ctx.moveTo(w * 0.5, index)
                        ctx.lineTo(w, index)
                        const text = num.toFixed(fixed)
                        ctx.save()
                        ctx.rotate((-90 * Math.PI) / 180)
                        const textWidth = ctx.measureText(text).width
                        if (num == h) {
                            ctx.fillText(text, -index, 12)
                        } else if (num === 0) {
                            ctx.fillText(text, -textWidth, 12)
                        } else {
                            ctx.fillText(text, -(index + textWidth / 2), 12)
                        }
                        // ctx.fillText(text, -(index + textWidth / 2), 12)
                        ctx.rotate((0 * Math.PI) / 180)
                        ctx.restore()
                    } else {
                        ctx.moveTo(w * 0.7, index)
                        ctx.lineTo(w, index)
                    }
                    index += gap
                } while (index <= h)
            }
            ctx.closePath()
            ctx.stroke()
            ctx.restore()
            ctx.setTransform(dpi, 0, 0, dpi, 0, 0)
        }
    },
}
</script>

<style lang="scss" scoped></style>